import { createElement, Component } from 'rax';
import Touchable from 'rax-touchable';


export default class ImgAddHot extends Component {

    constructor(props) {
      super(props);
      this.state = {
      };
    }
  
    render() {
      const { data, mds, selected, rightBgColor, onClickHot = () => {} } = this.props;
      let { json } = data;
  
      if (typeof json !== 'object') {
        try {
          json = JSON.parse(json);
        } catch (e) {
          json = defaultData.classList[0].json;
        }
      }
  
      const boxProps = {
        style: {
          position: 'relative',
          height: parseFloat(json.screenHeight),
          width: parseFloat(json.screenWidth),
          backgroundColor: rightBgColor,
        }
      };
      return (
        <View {...boxProps}>
          {
            json.img.map((item) => {
  
              const props = {
                style: {
                  position: 'absolute',
                  width: parseFloat(item.data.width),
                  height: parseFloat(item.data.height),
                  top: parseFloat(item.data.y),
                  left: parseFloat(item.data.x),
                },
                lazyload: true,
                source: { uri: item.data.url },
              };
              return <Picture {...props} />;
            })
          }
          {
            json.hot.map((item, index) => {
              const spmdId = `title${selected + 1}hot${index + 1}`;
              const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
              const props = {
                style: {
                  position: 'absolute',
                  width: parseFloat(item.data.width),
                  height: parseFloat(item.data.height),
                  top: parseFloat(item.data.y),
                  left: parseFloat(item.data.x)
                },
                'data-spmd': spmd,
                onPress: (e) => {
                  onClickHot(item.data.url, spmdId);
                  e.stopPropagation && e.stopPropagation();
                }
              };
              return <Touchable {...props} />;
            })
          }
        </View>
      );
    }
  }
  